import {
  ComponentWithStore
} from "mobx-miniprogram-bindings"
import {
  userStore
} from '@/store/userStore'
import {
  getCartList,
  updateGoodsState,
  checkAllCart,
  addCart,
  del
} from '@/api/cart'
import {
  toast
} from '@/utils/extendApi'
const computedBehavior = require('miniprogram-computed').behavior
ComponentWithStore({
  behaviors: [computedBehavior],
  // 组件的属性列表
  properties: {},

  // 组件的初始数据
  data: {
    cartList: [],//购买商品列表数据
    emptyDes: '还没有添加商品，快去添加吧～',
    timer: null

  },
  storeBindings: {
    store: userStore,
    fields: ['token']
  },
  computed: {
    // 按钮全选
    allChecked(data) {
      return (data.cartList.length !== 0 && data.cartList.every(item => item.isChecked === 1))
    },
    // 选中的商品总价格
    totalPrice(data) {
      return data.cartList.filter(item => item.isChecked === 1).reduce((sum, item) => {
        return sum + item.count * item.price
      }, 0)
    }
  },



  // 组件的方法列表
  methods: {
    // 控制单个复选框触发事件
    async onChange({
      detail,
      mark: {
        id,
        index
      }
    }) {

      const isChecked = detail ? 1 : 0
      // 同步后端更新单个复选框状态
      const res = await updateGoodsState(id, isChecked)
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }




    },
    //全选复选框触发的事件
    async allChecked({
      detail
    }) {
      const isChecked = detail ? 1 : 0
      // 同步后端更新全选复选框状态
      const res = await checkAllCart(isChecked)
      if (res.code === 200) {
        // 深拷贝，用于修改cartList的值
        const newCart = JSON.parse(JSON.stringify(this.data.cartList))
        // 让单个复选框跟全选复选框状态保持一致
        newCart.forEach(item => item.isChecked = isChecked)
        this.setData({
          cartList: newCart
        })
      }

    },
    // 获取购物车列表数据
    async getCartList() {
      const {
        data
      } = await getCartList()
      this.setData({
        cartList: data
      })
    },
    // 同步后台更新购买数量
    onChangeGoodsCount(e) {
      /**
       * detail 当前购买数量
       * id 商品id
       * ocount 旧的购买数量
       */
      const {
        detail,
        mark: {
          id,
          ocount,
          index
        }
      } = e
      // 对输入的购买数量进行校验
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      if (!reg.test(detail)) {
        // 没通过校验则重置为原购买数量
        this.setData({
          [`cartList[${index}].count`]: ocount
        })
      } else {
        // 防抖优化
        if (this.data.timer) clearTimeout(this.data.timer)
        this.data.timer = setTimeout(async () => {
          await addCart({
            goodsId: id,
            count: detail - ocount,
            blessing: this.data.cartList[index].blessing
          })

        }, 800)

      }
    },
    // 删除单条购买商品
    async del({
      mark: {
        id
      }
    }) {
      await del(id)
      this.getCartList()
    },
    // 提交订单
    byOrder() {
      // 一条商品都没选，则提醒用户
      if (this.data.totalPrice === 0) return toast({
        title: "请先选择要支付的商品"
      })
      // 跳转到订单详情页
      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail',
      })
    },
    onShow() {
      this.getCartList()
    }

  },



})